<template>
  <view class="layout pageBg">
    <custom-nav-bar title="分类"></custom-nav-bar>
    <view class="classify">
      <theme-item v-for="item in data.classifyList" :data="item"></theme-item>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, reactive } from "vue"
  import http from "@/api/api.js"
  
  const data = reactive({
    classifyList: []
  })
  
  onMounted(() => {
    getClassify()
  })
  
  // 分类
  const getClassify = () => {
    http.getClassify({
      pageNum: 1,
      pageSize: 20
    }).then(res => {
      data.classifyList = res.data
    })
  }
</script>

<style lang="scss">
.layout {
  .classify {
    padding: 30rpx;
    display: grid;
    gap: 15rpx;
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
